<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div ref="box" class="chart-box" style="height: 500px"></div>
      {{ list }}
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getReportsAPI } from '@/api/reports'
export default {
  name: '',
  data () {
    return {
      list: '',
    }
  },
  created () {
    this.getReports()
  },
  computed: {
  },
  methods: {
    async getReports () {
      const res = await getReportsAPI()
      console.log(res, 'reports');
      this.list = res.data
      // this.total = res.data.total
    },
  },
  mounted () {
    const myChart = echarts.init(this.$refs.box)
    // 绘制图表
    myChart.setOption({
      title: {
        text: '用户来源',
        top: '20',
        left: '15',
      },
      grid: {
        top: '15%',
        left: '5%',
        right: '50%'
      },
      tooltip: {
        trigger: 'axis' //提示线条
      },
      legend: {
        data: ["华东", "华南", "华北", "西部", "其他"]
      },
      yAxis: [
        {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: '#000',
            },
          },
        }
      ],
      xAxis: [
        {
          data: ["2017-12-27", "2017-12-28", "2017-12-29", "2017-12-30", "2017-12-31", "2018-1-1"],
          boundaryGap: false,
        }
      ],
      series: [
        {
          name: "华东", "type": "line", "stack": "总量",
          areaStyle: {
            normal: {
              color: '#d5726f',
            }
          },
          // showSymbol: false,
          lineStyle: {
            color: '#b4403e'
          },
          data: [2999, 3111, 4100, 3565, 3528, 6000]
        },
        {
          name: "华南", "type": "line", "stack": "总量",
          areaStyle: {
            normal: {
              color: '#6e7d88',
            }
          },
          lineStyle: {
            color: '#304655'
          },
          data: [5090, 2500, 3400, 6000, 6400, 7800]
        },
        {
          name: "华北", "type": "line", "stack": "总量",
          areaStyle: {
            normal: {
              color: '#91bdc3',
            }
          },
          lineStyle: {
            color: '#74a0a4'
          },
          data: [6888, 4000, 8010, 12321, 13928, 12984]
        },
        {
          name: "西部", "type": "line", "stack": "总量",
          areaStyle: {
            normal: {
              color: '#e1a894',
            }
          },
          lineStyle: {
            color: '#d38467'
          },
          data: [9991, 4130, 7777, 12903, 13098, 14028]
        },
        {
          name: "其他", "type": "line", "stack": "总量",
          areaStyle: {
            normal: {
              color: '#b2d8c7'
            }
          },
          lineStyle: {
            color: '#96c9b1'
          },
          data: [15212, 5800, 10241, 14821, 15982, 14091]
        }
      ]
    })
  },
}
</script>
<style lang='less'  scoped>
</style>
